<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-top-stats>
				<div class="number">
					<div class="money base-flex">
						<div class="money-li">
							<div class="title">总积分:</div>
							<div class="num">{{ scoreDetail.total }}</div>
						</div>
						<div class="money-li">
							<div class="title">当前积分:</div>
							<div class="num">{{ scoreDetail.current }}</div>
						</div>
						<div class="money-li">
							<div class="title">已兑换积分:</div>
							<div class="num">{{ scoreDetail.already }}</div>
						</div>
					</div>
				</div>
			</template>

			<template #slot-datepicker>
				<div style="margin-left:1em">
					<date-picker
						@change="val => refresh({ startTime: val[0], endTime: val[1], page: 1 })"
						@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
					></date-picker>
				</div>
			</template>

			<!-- 筛选 -->
			<template #slot-filter>
				<div class="filter-box">
					<el-select
						size="mini"
						filterable
						v-model="select.filters"
						placeholder="全部"
						style="margin-right: 10px;width:125px;margin-left:10px"
						@change="val => crud.refresh({ recordStatus: val })"
					>
						<el-option label="全部" value=""></el-option>
						<el-option label="未使用" value="0"></el-option>
						<el-option label="已使用" value="1"></el-option>
						<el-option label="已过期" value="2"></el-option>
						<el-option label="已到账" value="3"></el-option>
						<el-option label="入账中" value="4"></el-option>
					</el-select>
				</div>
			</template>

			<template #table-column-score_obj="{scope}">
				<div style="text-align:left">
					<div>
						总积分: <span style="color:red">{{ scope.row.score.total }} </span>
					</div>
					<div>
						当前积分: <span style="color:red">{{ scope.row.score.current }}</span>
					</div>
					<div>
						已兑换积分: <span style="color:red">{{ scope.row.score.already }}</span>
					</div>
				</div>
			</template>

			<template #table-column-money_obj="{scope}">
				<div style="text-align:left">
					<div>
						全部: <span style="color:red">￥{{ scope.row.money.total }} </span>
					</div>
					<div>
						已到账: <span style="color:red">￥{{ scope.row.money.already }}</span>
					</div>
					<div>
						入账中: <span style="color:red">￥{{ scope.row.money.disabled }}</span>
					</div>
					<div>
						未使用: <span style="color:red">￥{{ scope.row.money.unused }}</span>
					</div>
					<div>
						已失效: <span style="color:red">￥{{ scope.row.money.ing }}</span>
					</div>
				</div>
			</template>

			<template #table-column-createTime="{scope}">
				<span>{{ toStamp(scope.row.createTime) }}</span>
			</template>

			<cl-form ref="cl-form"></cl-form>
		</cl-crud>
	</div>
</template>

<script>
import platform from '@/mixin/platform';
import DatePicker from '@/components/common/date-picker';
import moment from 'moment';

export default {
	data() {
		return {
			crud: null,
			options: [],
			select: {
				filters: ''
			},
			scoreDetail: {
				total: 0, // 总积分
				current: 0, // 当前积分
				already: 0 // 已兑换积分
			}
		};
	},
	components: {
		DatePicker
	},
	mixins: [platform],
	methods: {
		toStamp(stamp) {
			return moment(stamp).format('YYYY-MM-DD HH:mm:ss');
		},
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.integralMall.scoreMoneyList)
				.set('dict', {
					label: {
						add: '添加任务'
					},
					api: {
						page: 'userDetail'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: '用户名',
							prop: 'nickName',
							align: 'center'
						},
						{
							label: '手机号',
							prop: 'phone',
							align: 'center'
						},
						{
							label: '积分',
							prop: 'score_obj',
							align: 'center',
							width: 250
						},
						{
							label: '补贴红包',
							prop: 'money_obj',
							align: 'center',
							width: 220
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center'
						}
					],
					op: {
						visible: false
					}
				})
				.set('layout', [
					['slot-top-stats'],
					['refresh-btn', 'slot-datepicker', 'slot-filter', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					const { subData } = await next(params);
					this.scoreDetail.total = subData.total;
					this.scoreDetail.current = subData.current;
					this.scoreDetail.already = subData.already;
				})
				.done();

			app.refresh();
		},
		refresh(params) {
			this.crud.refresh(params);
		}
	}
};
</script>
<style lang="scss" scoped>
.number {
	width: 100%;
	background: #ffffff;
	padding: 20px;
	border-radius: 8px;
	.money {
		display: flex;
		justify-content: space-between;
		.money-li {
			flex: 1;
			position: relative;
			left: 70px;
			.money-li-child {
				.num {
					color: $main-light;
					font-size: $font16;
					margin-top: 5px;
				}
				margin-top: 18px;
			}
			.money-li-child div:first-child {
				margin-right: 30px;
			}
			.title {
				color: $text-grey;
				font-size: $font12;
			}
			.num {
				color: $main-light;
				font-size: $font22;
				font-weight: bold;
				margin-top: 6px;
			}
		}
	}
}
</style>
